<template>
<!--订单金卡已过期/有效详情页-->
  <div class="jifenduihuandetail">
    <order>
        <ul class="address">
          <li>会员姓名：张三</li>
          <li>贵宾服务有效期：2018/9/28-2018/10/28</li>
        </ul>
        <div class="contents">
          <div>
            <p class="title">验证码</p>
            <ul class="img">
              <li>
                <img src="../../../assets/erweima.png" alt="" width="120">
                <span v-show="isuse">已使用</span>
              </li>
              <li>2235  4575  6817</li>
            </ul>
            <p  class="title">使用说明</p>
            <ul class="des">
              <li>1.使用前请向工作人员出示此码。</li>
            </ul>
            <p class="liaojiemore">了解更多，请点击 <span>我的贵宾卡</span></p>
          </div>
        </div>
    </order>
  </div>
</template>

<script type="text/ecmascript-6">
  import order from '../../offertemplate/jinkaorder'
  export default {
    name: 'orderdetail',
    props: {},
    data() {
      return {
        isuse:false,
      };
    },
    methods: {},
    created() {

    },
    components: {
      order
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">

  .address{
    background-color: #fff;
    padding:0 10px 10px;
    text-align: left;
    color: #666;
    li{
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #eee;
    }
    li:last-child{
      border-bottom: none;
    }
  }
  .contents{
    text-align: left;
    color: #111;
    .liaojiemore{
      margin: 10px;
      padding-top: 10px;
      text-align: center;
      border-top: 1px solid #eee;
      span{
        color: #ff8551;
      }
    }
    .title{
      font-size: 18px;
      padding:0 10px ;
    }
    .img{
      text-align: center;
      font-size: 13px;
      margin-bottom: 15px;
      li:first-child{
        margin-bottom: 10px;
        position: relative;
        span{
          height: 75px;
          width: 75px;
          line-height: 75px;
          text-align: center;
          border:1px solid #ddd;
          border-radius: 50%;
          color: #999;
          position: absolute;
          top: -30px;
          right: 22.5%;
          background-color: rgba(255,255,255,0.5);
        }
        img{
          border:1px solid #ddd;
        }
      }

    }
    .des{
      color: #666;
      padding:0 10px 10px;
    }
  }

</style>
